<script setup lang="ts">
import Map3D from './index.vue'
import geoData from './assets/data/anhui.json'
import bgData from './assets/data/china.json'

const mapConfigLight = {
  material: {
    // 地图表面材质
    color: '#99beff',
    emissive: '#ffffff',
    emissiveIntensity: 0.1,
    roughness: 0.3,
    metalness: 0.3
  },
  sideMaterial: {
    // 地图侧面材质
    color: '#83a1cc',
    // emissive: '#589ee7',
    roughness: 0.8,
    metalness: 0.2
  },
  materialHighlight: {
    color: '#006aff'
  },
  labelStyle: {
    // 地图标签文字样式
    color: '#595959',
    fontSize: '12px',
    textShadow: 'none',
    position: 'relative'
  },
  labelStyleHighlight: {
    // 地图标签文字高亮样式
    color: '#fff',
    fontSize: '16px',
    textShadow: '1px 1px 2px #000',
    position: 'relative'
  },
  lineMaterial: {
    color: '#75b0db'
  },
  bottomLine: {
    radius: 0.02, // 地图底部线条半径
    color: '#1083F9' // 地图底部线条颜色
  },
  depth: 0.4, // 地图拉伸厚度
  mapScale: [10, 10, 10],
  mapPosition: [0, 0, 0],
  rotateSpeed: 0, // 地图旋转动画
  mapCentroid: [117.226884, 31.849254], // 地图中心点（地理中心经纬度）
  fullScreen: false, // 是否用于大屏
  // screenWidth: 1920, // 可选，用于大屏的时候，大屏固定宽度
  // screenHeight: 1080, // 可选，用于大屏的时候，大屏固定高度
  // lights: [
  //   {
  //     light: new THREE.AmbientLight(0xd4e7fd, 4),
  //     position: [0, 0, 0],
  //   }
  // ], // 可选，灯光配置
  ripples: {
    // 底部波纹配置
    show: true, // 是否显示
    color: '#478ef1',
    transparent: true,
    opacity: 0.01,
    size: 1
  }
}

const mapConfigDark = {
  material: {
    // 地图表面材质
    color: '#2a2f33',
    roughness: 0.35,
    emissive: '#000000',
    emissiveIntensity: 0,
    metalness: 0.8
  },
  sideMaterial: {
    // 地图侧面材质
    color: '#181818',
    roughness: 0.8,
    metalness: 0.2
  },
  materialHighlight: {
    color: '#5f757e'
  },
  labelStyle: {
    // 地图标签文字样式
    color: '#848484',
    fontSize: '12px',
    textShadow: 'none',
    position: 'relative'
  },
  labelStyleHighlight: {
    // 地图标签文字高亮样式
    color: '#fff',
    fontSize: '16px',
    textShadow: '1px 1px 2px #000',
    position: 'relative'
  },
  depth: 0.4, // 地图拉伸高度
  lineMaterial: {
    color: '#5f6a76'
  },
  bottomLine: {
    radius: 0.02, // 地图底部线条半径
    color: '#4ac8ff' // 地图底部线条颜色
  },
  mapScale: [25, 25, 25],
  mapPosition: [0, 0, 0],
  rotateSpeed: 0, // 地图旋转动画
  mapCentroid: [117.226884, 31.849254], // 地图中心点（地理中心经纬度）
  fullScreen: true, // 是否用于大屏
  screenWidth: 1920, // 可选，用于大屏的时候，大屏固定宽度
  screenHeight: 1080, // 可选，用于大屏的时候，大屏固定高度
  // lights: [
  //   {
  //     light: new THREE.AmbientLight(0xd4e7fd, 4),
  //     position: [0, 0, 0],
  //   }
  // ], // 可选，灯光配置
  ripples: {
    // 底部波纹配置
    show: true, // 是否显示
    color: '#478ef1',
    transparent: true,
    opacity: 0.01
  }
}

const mapConfig = ref(JSON.parse(JSON.stringify(mapConfigLight)))

const bgConfig = ref({
  lineMaterial: {
    color: '#79a1d9',
    transparent: true,
    opacity: 0.5
  }
})

const mapScale = ref(25)
const handleMapScaleChange = (val: number) => {
  mapConfig.value.mapScale = [val, val, val]
}

const lightTheme = ref(true)
const handleThemeChange = (value) => {
  if (value) {
    // 亮色
    mapConfig.value.material = { ...mapConfigLight.material }
    mapConfig.value.sideMaterial = { ...mapConfigLight.sideMaterial }
    mapConfig.value.materialHighlight = { ...mapConfigLight.materialHighlight }
    mapConfig.value.labelStyle = { ...mapConfigLight.labelStyle }
    mapConfig.value.labelStyleHighlight = { ...mapConfigLight.labelStyleHighlight }
    mapConfig.value.lineMaterial = { ...mapConfigLight.lineMaterial }
    mapConfig.value.bottomLine = { ...mapConfigLight.bottomLine }
    bgConfig.value = {
      lineMaterial: {
        color: '#79a1d9',
        transparent: true,
        opacity: 0.5
      }
    }
  } else {
    // 暗色
    mapConfig.value.material = { ...mapConfigDark.material }
    mapConfig.value.sideMaterial = { ...mapConfigDark.sideMaterial }
    mapConfig.value.materialHighlight = { ...mapConfigDark.materialHighlight }
    mapConfig.value.labelStyle = { ...mapConfigDark.labelStyle }
    mapConfig.value.labelStyleHighlight = { ...mapConfigDark.labelStyleHighlight }
    mapConfig.value.lineMaterial = { ...mapConfigDark.lineMaterial }
    mapConfig.value.bottomLine = { ...mapConfigDark.bottomLine }
    bgConfig.value = {
      lineMaterial: {
        color: '#5f6a76',
        transparent: true,
        opacity: 1
      }
    }
  }
}
</script>

<template>
  <div class="root">
    <div class="left" :class="{ dark: !lightTheme }">
      <n-switch v-model:value="lightTheme" class="theme-switch" @update:value="handleThemeChange">
        <template #checked>亮色</template>
        <template #unchecked>暗色</template>
      </n-switch>
      <Map3D :geo-data="geoData" :map-config="mapConfig" :bg-data="bgData" :bg-config="bgConfig" />
    </div>
    <div class="right">
      <n-tabs type="line" animated>
        <n-tab-pane name="地图" tab="地图">
          <div class="config-title">表面</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.material.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.material.color }}</n-gi>

            <n-gi :span="1" class="label">自发光颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.material.emissive" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.material.emissive }}</n-gi>

            <n-gi :span="1" class="label">自发光强度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.material.emissiveIntensity" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.material.emissiveIntensity }}</n-gi>

            <n-gi :span="1" class="label">粗糙度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.material.roughness" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.material.roughness }}</n-gi>

            <n-gi :span="1" class="label">金属性</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.material.metalness" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.material.metalness }}</n-gi>
          </n-grid>

          <div class="config-title">侧面</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.sideMaterial.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.sideMaterial.color }}</n-gi>

            <n-gi :span="1" class="label">粗糙度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.sideMaterial.roughness" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.sideMaterial.roughness }}</n-gi>

            <n-gi :span="1" class="label">金属性</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.sideMaterial.metalness" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.sideMaterial.metalness }}</n-gi>
          </n-grid>

          <div class="config-title">区块高亮</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.materialHighlight.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.materialHighlight.color }}</n-gi>
          </n-grid>

          <div class="config-title">区块分隔线</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.lineMaterial.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.lineMaterial.color }}</n-gi>
          </n-grid>

          <div class="config-title">底部轮廓</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.bottomLine.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.bottomLine.color }}</n-gi>

            <n-gi :span="1" class="label">粗细</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.bottomLine.radius" :min="0" :max="0.1" :step="0.01" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.bottomLine.radius }}</n-gi>
          </n-grid>

          <div class="config-title">形状和位置</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">地图厚度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.depth" :min="0" :max="1" :step="0.1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.depth }}</n-gi>

            <n-gi :span="1" class="label">缩放倍数</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapScale" :min="0" :max="100" :step="1" @update:value="handleMapScaleChange" />
            </n-gi>
            <n-gi :span="1">{{ mapScale }}</n-gi>

            <n-gi :span="1" class="label">垂直偏移</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.mapPosition[1]" :min="-200" :max="200" :step="1" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.mapPosition[1] }}</n-gi>
          </n-grid>

          <div class="config-title">底部波纹</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">是否显示</n-gi>
            <n-gi :span="3">
              <n-switch v-model:value="mapConfig.ripples.show" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.ripples.show }}</n-gi>

            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="mapConfig.ripples.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.ripples.color }}</n-gi>
            <n-gi :span="1" class="label">透明度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="mapConfig.ripples.opacity" :min="0" :max="1" :step="0.01" />
            </n-gi>
            <n-gi :span="1">{{ mapConfig.ripples.opacity }}</n-gi>
          </n-grid>
          <div class="config-title">周边地图轮廓</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker v-model:value="bgConfig.lineMaterial.color" :show-alpha="false" />
            </n-gi>
            <n-gi :span="1">{{ bgConfig.lineMaterial.color }}</n-gi>
            <n-gi :span="1" class="label">透明度</n-gi>
            <n-gi :span="3">
              <n-slider v-model:value="bgConfig.lineMaterial.opacity" :min="0" :max="1" :step="0.01" />
            </n-gi>
            <n-gi :span="1">{{ bgConfig.lineMaterial.opacity }}</n-gi>
          </n-grid>
        </n-tab-pane>
        <n-tab-pane name="文字" tab="文字">
          <div class="config-title">区块标签文字</div>
          <div class="config-title">区块标签文字高亮</div>
          <div class="config-title">气泡弹窗</div>
        </n-tab-pane>
        <n-tab-pane name="柱状图" tab="柱状图">
          <div class="config-title">柱子最大高度</div>
          <div class="config-title">柱子半径</div>
          <div class="config-title">柱子1材质</div>
          <div class="config-title">柱子1高亮材质</div>
          <div class="config-title">柱子2材质</div>
          <div class="config-title">柱子2高亮材质</div>
        </n-tab-pane>
        <n-tab-pane name="散点图" tab="散点图">散点图</n-tab-pane>
        <n-tab-pane name="区块图" tab="区块图">
          <div class="config-title">区块颜色</div>
          <n-grid x-gap="12" :cols="5">
            <n-gi :span="1" class="label">最小值颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker :show-alpha="false" />
            </n-gi>
            <n-gi :span="1"></n-gi>
            <n-gi :span="1" class="label">最大值颜色</n-gi>
            <n-gi :span="3">
              <n-color-picker :show-alpha="false" />
            </n-gi>
            <n-gi :span="1"></n-gi>
          </n-grid>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.root {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    background: linear-gradient(180deg, #edf5fc 0%, #c4d7f1 100%);
    border-right: 1px solid #ccc;
    flex: 1;
    &.dark {
      background: #0c1414;
    }
    .theme-switch {
      position: fixed;
      left: 20px;
      top: 20px;
      z-index: 5;
    }
  }

  .right {
    width: 30%;
    padding: 20px;
    height: 100%;
    overflow: auto;

    .config-title {
      font-size: 20px;
      padding: 10px 0;
    }

    .label {
      height: 40px;
    }
  }
}
</style>
